<template>
  <div>
    <!-- 标题 -->
    <div class="tp1">学生分布情况</div>
    <!-- 图表容器 -->
    <div class="da1" ref="wrap"></div>
    <!-- 选项组件 -->
    <option :option="option"></option>
  </div>
</template>

<script>
// 导入options组件
import options from './gong/options.vue'
// 导入echarts库
import * as echarts from 'echarts'
// 导入vue的onMounted和ref函数
import { onMounted, ref } from 'vue'
// 导入dayjs库
import dayjs from 'dayjs'

export default {
  setup() {
    // 定义图表容器
    let wrap = ref(null)
    // 定义图表选项
    let option = ref({
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['运动区', '宿舍区', '教学区', '吸烟区', '干饭区'],
        icon: 'circle',
        textStyle: {
          color: 'white'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '1%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '运动区',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
          symbol: 'none',
          smooth: true
        },
        {
          name: '宿舍区',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
          symbol: 'none',
          smooth: true
        },
        {
          name: '教学区',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
          symbol: 'none',
          smooth: true
        },
        {
          name: '吸烟区',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
          symbol: 'none',
          smooth: true
        },
        {
          name: '干饭区',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          symbol: 'none',
          smooth: true
        }
      ]
    })

    // 组件挂载后执行
    onMounted(() => {
      // 初始化图表
      var myChart = echarts.init(wrap.value)
      // 创建WebSocket连接
      const ws = new WebSocket('ws://localhost:3002/bigscreen/websockets?id=555')

      // 监听WebSocket消息
      const onmessage = (e) => {
        // console.log(e)
        // 解析消息数据
        const data = JSON.parse(e.data)
        // console.log(data)
        // 更新图表选项
        // 设置图例数据
   option.value.legend.data=data.legendData
   // 设置系列数据
   option.value.series=data.seriesData.map((item,index)=>{
     // 返回一个对象，包含系列名称、数据、类型、平滑、堆叠、符号
     return {
       name:data.legendData[index],
       data:item,
       type:'line',
       smooth:true,
       stack:'Total',
       symbol:'none',
     }
   })
        // 更新图表
        myChart.setOption(option.value)
      }

      ws.onmessage = onmessage
     // 定义时间函数
     // 定义一个函数sj
 const sj=()=>{
       // 定义一个空数组kk
      let kk = []
      // 获取当前时间的时间戳
      let time = +new Date()
      // 循环4次
      for (let i = 0; i < 4; i++) {
        // 将当前时间格式化为HH:mm:ss，并插入到数组kk的开头
        kk.unshift(dayjs(time).format('HH:mm:ss'))
        // 时间减去2分钟
        time -= 2*60*1000 
      }
      // 将数组kk赋值给option.value.xAxis.data
      option.value.xAxis.data = kk
     }
    sj()
        // 定时更新图表
        setInterval(() => {
         // 设置图表的配置项
     myChart.setOption(option.value)
    }, 2000)
    })

  
    return {
      wrap
    }
  }
}
</script>
<style>
.tp1 {
  width: 21%;
  height: 38px;
  /* height: 10px; */
  background: url('../assets//images2/titlebg.png');
  background-size: 100% 100%;
  position: absolute;
  left: 50px;
  top: 430px;
  color: #fff;
  line-height: 38px;
  padding-left: 30px;
}
.da1 {
  width: 360px;
  height: 240px;
  background-color: #0c1d5f;
  margin-top: 80px;
  margin-left: 50px;
}
</style>